import Image from 'next/image'
import Header from '@/components/home/header'
import header1 from '@/assets/images/header1.png'
import header2 from '@/assets/images/header2.png'
import Qx from '@/components/picList/qixi'
import { useRouter } from 'next/router'
import { useStores } from '@/store'
import { downImageUrl } from '@/utils/domTool'
import { getAidrawShare } from '@/api/index'
import { useEffect, useState } from 'react'
import { ResAiShare } from '@/types'
import { Toast } from 'antd-mobile'
import { getQueryVariable } from '@/utils/http'
import { useAsyncEffect } from 'ahooks'
import wxSdk from '@/utils/weixin'
export default function Share() {
    const store = useStores()
    const router = useRouter()
    const [ids, setId] = useState('')
    const [res, setRes] = useState<Partial<ResAiShare>>({})


    useAsyncEffect(async () => {
        const id = getQueryVariable('id') as string
        if (!id) {
            return
        }
        setId(id)
        const res = await getAidrawShare({ id });
        setRes(res.data)
    }, [])


    return (
        <div className='w-full h-full min-h-r66.7 '>·
            <Header cb={() => { }} headerColor='bg-FFE5E5' headerText={'AI生成情侣头像'}></Header>
            <div className='m-r1.5 text-center '>
                <span className=' block text-r1.8 text-black mb-r1.0 font-bold'>邀你换上新头像</span>
                <span className=' block text-r1.6 text-black mb-r1.0 font-normal'>图怪兽AI限时免费做情侣头像，分享头像最多免 费得30点AI点数~
                </span>
            </div>
            <div className='h-auto w-full pl-r0.7'>
                {res.list?.map((val, key) => {
                    return (<div className='w-r16.5 h-r19.0 inline-block bg-white rounded-2xl m-r0.8 text-center '>
                        <img className=' w-r14.0 h-r14.0 rounded-lg  m-r1.2' src={val.sample || ''} alt={''}></img>
                        <div className='block text-center text-r1.6 font-bold  -mt-r0.5 cursor-pointer' onClick={() => {
                            if (val) {
                                wx.miniProgram.getEnv(function (res) {
                                    wx.miniProgram.navigateTo({
                                        url: `/pages/webView/saveImg?src=${btoa(val.sample)}`,
                                        success: function () { }
                                    });
                                }) 
                              //  downImageUrl(val.sample, '1')
                            }

                        }}>下载头像</div>
                    </div>)
                })}

                {/* <div className='w-r16.5 h-r19.0 inline-block bg-white rounded-2xl m-r0.8 text-center'>
                    <Image className=' w-r14.0 h-r14.0  rounded-lg m-r1.2' src={header2} alt={''}></Image>
                    <div className='block text-center text-r1.6 font-bold -mt-r0.5 cursor-pointer' onClick={() => {
                        if (res.origin?.prompt_m) {
                            downImageUrl(res.origin?.prompt_m, '111')
                        }
                    }}>下载头像</div>
                </div> */}
            </div>

            <div className=' mt-r1.5 w-full inline-block'>


                {/* <a  href={`weixin://dl/miniprogram?appid=${store.loingInfo.wexParam.appId}&amp;t=webview&amp;url=${encodeURIComponent('/pages/webView/index?p=headshot')}`}   className=' block relative w-r34.5 h-r4.5 leading-r4.5 text-r1.6 rounded-3xl  text-white cursor-pointer  bg-gradient-to-r from-FF4747 to-FF7070   text-center left-1/2 -translate-x-1/2 mb-r1.5 '>我也要做同款</a> */}
                <span
                    onClick={() => {

                        wx.miniProgram.getEnv(function (res) {
                            wx.miniProgram.navigateTo({
                                url: `/pages/webView/index`,
                                success: function () { }
                            });
                        }) 
                    }}
                    className=' block relative w-r34.5 h-r4.5 leading-r4.5 text-r1.6 rounded-3xl  text-white cursor-pointer  bg-gradient-to-r from-FF4747 to-FF7070   text-center left-1/2 -translate-x-1/2 mb-r1.5 '>我也要做同款</span>
            </div>
            <Qx listObj={res.data || {}} ></Qx>

        </div>
    )
}
